<template>
  <div class="homepage">
    <h4 class="img_text">写作专栏</h4>
    <img src="../assets/undraw_content_creator_xeju.svg" alt="等待加载">
  </div>
  <button type="button" class="btn btn-primary">随心写</button>
  <column-list :list="list"></column-list>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { GlobalDataProps, ImageProps, ResponseType } from '../store'
import ColumnList from '../components/ColumnList.vue'
import createMessage from '../createMessage'

export default defineComponent({
  name: 'Home',
  components: {
    ColumnList
  },
  setup () {
    const store = useStore<GlobalDataProps>()
    onMounted(() => {
      store.dispatch('fetchColumns')
    })
    const list = computed(() =>
      store.getters.getColumns
    )
    const beforeUpload = (file: File) => {
      const isjpg = file.type === 'image/jpeg'
      if (!isjpg) {
        createMessage('上传文件只能是JPG格式', 'error')
      }
      return isjpg
    }
    const onFileUploaded = (rawData: ResponseType<ImageProps>) => {
      createMessage(`上传图片id ${rawData.data._id}`, 'success')
    }
    return {
      list,
      beforeUpload,
      onFileUploaded
    }
  }
})
</script>
<style>
</style>
